﻿@page "/scheduler/header-rows"

@using Syncfusion.Blazor.Schedule
@inherits SampleBaseComponent;

<SampleDescription>
    <p> This demo showcases how to display the additional header rows on timeline view. In this demo, an additional row for displaying <b>month</b> and <b>week number</b> has been added. </p>
</SampleDescription>
<ActionDescription>
    <p>
        Unlike the usual date and time rows, timeline view can be displayed with additional header rows to display the years, months and week numbers. To do so, define the
        <code>HeaderRows</code> property which accepts an array of object and each object includes the <code>Option</code> API to define the specific header row type such as <code>Year</code>,
        <code>Month</code>,<code>Week</code> and <code>Date</code>. The object also includes the <code>Template</code> option to provide label customization on these rows. This <code>HeaderRows</code> property is applicable only on timeline views.
    </p>
</ActionDescription>

<div class="col-lg-12 control-section">
    <div class="schedule-wrapper">
        <SfSchedule TValue="ScheduleData.AppointmentData" Width="100%" Height="650px" @bind-SelectedDate="@CurrentDate">
            <ScheduleHeaderRows>
                <ScheduleHeaderRow Option="HeaderRowType.Month"></ScheduleHeaderRow>
                <ScheduleHeaderRow Option="HeaderRowType.Week"></ScheduleHeaderRow>
                <ScheduleHeaderRow Option="HeaderRowType.Date"></ScheduleHeaderRow>
            </ScheduleHeaderRows>
            <ScheduleViews>
                <ScheduleView MaxEventsPerRow="11" Option="View.TimelineMonth" Interval="12"></ScheduleView>
            </ScheduleViews>
            <ScheduleEventSettings DataSource="@DataSource"></ScheduleEventSettings>
        </SfSchedule>
    </div>
</div>

@code{
    private DateTime CurrentDate = new DateTime(2020, 1, 6);
    public List<ScheduleData.AppointmentData> DataSource = new ScheduleData().GetHeaderRowData();
}
